<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">

        class Count extends React.Component {
            state = {
                sum: 0
            }
            constructor(props){
                super(props)
                console.log(this)

            }
            add = () => {
                console.log(this)
                const sum = this.state.sum;
                this.setState({ sum: sum + 1 })
            }
            
            render() {
                const { sum } = this.state
                return (
                    <div>

                        <h2>当前求和为：{sum}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )

            }

        }


        ReactDOM.render(<div>
            <Count />
        </div>, document.getElementById('test'))



    </script>
</body>

</html>